<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
		<script src="js/vue.js"></script>
		<script src="js/axios-0.18.0.js"></script>
		<script src="element-ui/lib/index.js"></script>
		<script src="js/server.js"></script>
		<style type="text/css">
			.login-form {
				width: 450px;
				height: 220px;
				border: 1px solid #DCDFE6;
				border-radius: 5px;
				box-shadow: 0 0 25px #909399;
				margin: 150px auto;
				padding: 35px 35px 15px 35px;
			}

			.login-title {
				text-align: center;
				margin: 0 auto 10px auto;
				color: #303133;
			}
		</style>

	</head>
	<body>
		<div id="div">
			<el-form :model="loginForm" :rules="rules" ref="loginForm" label-width="100px" class="login-form">
				<h3 class="login-title">超市账单管理系统</h3>
				<el-form-item label="账号" prop="userCode">
					<el-input v-model="loginForm.userCode"></el-input>
				</el-form-item>
				<el-form-item label="密码" prop="password">
					<el-input type="password" v-model="loginForm.password"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="submitForm('loginForm')">登录</el-button>
					<el-button @click="resetForm('loginForm')">重置</el-button>
				</el-form-item>
			</el-form>
		</div>
	</body>

	<script type="application/javascript">
		var vm = new Vue({
			el: "#div",
			data: {
				loginForm: {
					userCode:"",
					password:""
				},
				rules: {
					userCode: [{
						required: true,
						message: '请输入账号名',
						trigger: 'blur'
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}]
				}
			},
			methods: {
				submitForm(formName) {
					//formName 对应表单属性 ref="loginForm"
					this.$refs[formName].validate((valid) => {
						if (valid) {
							// 显示登录中提示
							const loading = this.$loading({
								lock: true,
								text: '登录中...',
								spinner: 'el-icon-loading',
								background: 'rgba(0, 0, 0, 0.7)'
							});
							
							// 请求参数作为FormData发送
							const formData = new FormData();
							formData.append('userCode', this.loginForm.userCode);
							formData.append('passWord', this.loginForm.password);
							
							console.log('正在发送登录请求，用户名:', this.loginForm.userCode);
							
							axios({
								method: 'post',
								url: server_url + "/user/login",
								data: formData,
								headers: {
									'Content-Type': 'multipart/form-data'
								},
								withCredentials: true // 确保跨域请求发送cookie
							}).then(resp => {
								loading.close(); // 关闭加载提示
								console.log('登录响应数据:', resp.data);
								
								// 检查响应中的Cookie和会话信息
								console.log('响应头:', resp.headers);
								
								if(resp.data.flag){
									//登录成功
									console.log('登录成功，用户完整数据:', resp.data.data);
									
									// 确认用户角色信息
									const userData = resp.data.data;
									console.log('用户ID:', userData.id);
									console.log('用户编码:', userData.userCode);
									console.log('用户角色ID:', userData.userRole);
									
									if (userData.role) {
										console.log('角色对象:', userData.role);
										console.log('角色ID:', userData.role.id);
										console.log('角色名称:', userData.role.roleName);
									} else {
										console.log('用户没有关联角色对象');
									}
									
									// 标记是否为管理员
									const isAdmin = userData.userRole === 1 || 
												   (userData.role && userData.role.id === 1) || 
												   (userData.role && userData.role.roleName && userData.role.roleName.includes("管理员"));
									console.log('是否为管理员:', isAdmin);
									
									//将登录用户存储到localStorage中 - 存入的value值必须是字符串,并且是json字符串
									localStorage.setItem("loginUser", JSON.stringify(resp.data.data));
									this.$message.success('登录成功！');
									
									// 延迟跳转，确保Cookie已经设置
									setTimeout(() => {
										//跳转到主页
										window.location.href = "index.html";
									}, 500);
								} else {
									this.$message.error(resp.data.message || "登录失败，用户名或密码错误");
								}
							}).catch(err => {
								loading.close(); // 关闭加载提示
								console.log('登录错误:', err);
								
								// 提供更详细的错误信息
								let errorMessage = "登录失败";
								if (err.response) {
									console.log('错误状态码:', err.response.status);
									console.log('错误数据:', err.response.data);
									
									if (err.response.status === 403) {
										errorMessage += "，服务器拒绝请求 (403)";
									} else if (err.response.status === 401) {
										errorMessage += "，认证失败 (401)";
									} else {
										errorMessage += "，服务器错误 (" + err.response.status + ")";
									}
									
									if (err.response.data && err.response.data.message) {
										errorMessage += ": " + err.response.data.message;
									}
								} else if (err.request) {
									console.log('请求已发送但没有收到响应');
									errorMessage += "，无法连接到服务器";
								} else {
									console.log('请求设置出错:', err.message);
									errorMessage += ": " + err.message;
								}
								
								this.$message.error(errorMessage);
							});
						}
					});
				},
				resetForm(formName) {
					this.$refs[formName].resetFields();
				}
			}
		})
	</script>
</html>